Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="tree">
      <span class="sr-only">Toggle tree growth</span>
      <svg
        class="tree"
        viewBox="0 0 274 564"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <ellipse
          class="tree__hole"
          cx="137.5"
          cy="497.5"
          rx="133.5"
          ry="66.5"
          fill="black"
        />
        <rect
          class="tree__stump"
          x="115"
          y="411"
          width="44"
          height="90"
          rx="18"
          fill="#DD3B04"
        />
        <g class="tree__layer">
          <path
            d="M21.4453 335.063C35.0918 307.339 75.8076 236.749 105.619 185.688C120.689 159.877 157.868 160.165 172.54 186.203C200.531 235.879 238.414 304.05 253.247 335.063C278.007 386.828 273.507 395.327 273.507 403.826C273.507 412.325 267.007 461 139.507 461C12.0067 461 1.00672 409.5 1.00672 399.826C1.00672 390.152 -0.993284 380.647 21.4453 335.063Z"
            fill="#15A958"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M256.294 345.447C237.794 357.526 204.687 367.999 145.545 367.999C74.737 367.999 39.8601 352.115 22.8438 336.333C37.6691 306.937 76.7792 239.15 105.658 189.687C120.727 163.876 157.906 164.164 172.578 190.202C200.569 239.878 238.452 308.049 253.285 339.062C254.34 341.268 255.342 343.395 256.294 345.447Z"
            fill="#008466"
          />
        </g>
        <g class="tree__layer">
          <path
            d="M39.2664 234.534C49.9772 212.775 80.4713 159.687 104.907 117.732C119.949 91.9052 157.144 92.173 171.784 118.23C194.67 158.961 223.041 210.256 234.653 234.534C255.524 278.168 251.73 285.332 251.73 292.495C251.73 299.659 246.252 340.688 138.781 340.688C31.3106 340.688 22.0386 297.278 22.0386 289.124C22.0386 280.969 20.3528 272.958 39.2664 234.534Z"
            fill="#15A958"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M228.373 221.857C211.736 229.795 185.429 235.93 143.874 235.93C94.247 235.93 65.5594 226.674 49.0547 215.907C63.2295 189.784 85.9181 150.386 104.937 117.732C119.979 91.9052 157.174 92.173 171.814 118.23C191.253 152.827 214.65 195.047 228.373 221.857Z"
            fill="#008466"
          />
        </g>
        <g class="tree__layer">
          <path
            d="M60.446 135.917C67.7268 121.126 86.7459 87.7464 104.119 57.7698C119.106 31.9109 156.309 32.1778 170.885 58.2703C187.071 87.2447 204.753 119.507 212.602 135.917C228.855 169.897 225.901 175.475 225.901 181.054C225.901 186.633 221.634 218.583 137.942 218.583C54.2505 218.583 47.0301 184.778 47.0301 178.428C47.0301 172.078 45.7172 165.839 60.446 135.917Z"
            fill="#15A958"
          />
        </g>
      </svg>
    </label>
    <input type="checkbox" class="sr-only" id="tree" role="switch" />
    <a
      class="bear-link"
      href="https://twitter.com/intent/follow?screen_name=jh3yy"
      target="_blank"
      rel="noreferrer noopener"
    >
      <svg
        class="w-9"
        viewBox="0 0 969 955"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="161.191"
          cy="320.191"
          r="133.191"
          stroke="currentColor"
          stroke-width="20"
        ></circle>
        <circle
          cx="806.809"
          cy="320.191"
          r="133.191"
          stroke="currentColor"
          stroke-width="20"
        ></circle>
        <circle
          cx="695.019"
          cy="587.733"
          r="31.4016"
          fill="currentColor"
        ></circle>
        <circle
          cx="272.981"
          cy="587.733"
          r="31.4016"
          fill="currentColor"
        ></circle>
        <path
          d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
          fill="currentColor"
        ></path>
        <rect
          x="310.42"
          y="448.31"
          width="343.468"
          height="51.4986"
          fill="#FF1E1E"
        ></rect>
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
          fill="currentColor"
        ></path>
      </svg>
    </a>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import 'normalize.css';

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
    Helvetica, Arial, sans-serif, system-ui;
}

html {
  color-scheme: light dark;
}

[data-theme='light'] {
  color-scheme: light only;
}

[data-theme='dark'] {
  color-scheme: dark only;
}

body::before {
  --size: 45px;
  --line: color-mix(in lch, canvasText, transparent 70%);
  content: '';
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 50%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
}

.bear-link {
  color: canvasText;
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0.8;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
  opacity: 1;
}

.bear-link svg {
  width: 75%;
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

[for] {
  --active: 0;
  cursor: pointer;
  height: clamp(24px, var(--size) * 0.5px, 150px);
  width: clamp(48px, var(--size) * 1px, 300px);
  border-radius: 50%;
  position: relative;
  transition: background-color 0.25s;
}

[for]:is(:hover, :has(+ :focus-visible)) {
  background: color-mix(in lch, canvas, canvasText 15%);
}

.tree {
  overflow: visible !important;
  width: 60%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  translate: -50% 10%;
}

:root:has(#tree:focus-visible) [for='tree'] {
  outline: 2px dashed green;
}

[for='tree'] {
  --ease: linear(
    0 0%,
    0.5007 7.21%,
    0.7803 12.29%,
    0.8883 14.93%,
    0.9724 17.63%,
    1.0343 20.44%,
    1.0754 23.44%,
    1.0898 25.22%,
    1.0984 27.11%,
    1.1014 29.15%,
    1.0989 31.4%,
    1.0854 35.23%,
    1.0196 48.86%,
    1.0043 54.06%,
    0.9956 59.6%,
    0.9925 68.11%,
    1 100%
  );
}

:root:has(#tree:checked) [for='tree'] {
  --active: 1;
  --ease: linear(
    0 0%,
    0.0075 31.89%,
    0.0044 40.4%,
    -0.0043 45.94%,
    -0.0196 51.14%,
    -0.0854 64.77%,
    -0.0989 68.6%,
    -0.1014 70.85%,
    -0.0984 72.89%,
    -0.0898 74.78%,
    -0.0754 76.56%,
    -0.0343 79.56%,
    0.0276 82.37%,
    0.1117 85.07%,
    0.2197 87.71%,
    0.4993 92.79%,
    1 100%
  );
}

.tree__layer,
.tree__hole {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: scale, translate;
  transition-duration: calc((var(--speed, 0.5) + (var(--i, 0) * 0.075)) * 1s);
  transition-timing-function: var(--ease);
}

.tree__hole {
  transform-origin: 50% 50%;
}

.tree__layer:nth-of-type(1) {
  --i: 0;
  scale: calc(1 - (var(--active) * 0));
  translate: 0 calc(var(--active) * 35%);
}
.tree__layer:nth-of-type(2) {
  --i: 1;
  scale: calc(1 + (var(--active) * 0.25));
  translate: 0 calc(var(--active) * 90%);
}
.tree__layer:nth-of-type(3) {
  --i: 2;
  scale: calc(1 + (var(--active) * 0.675));
  translate: 0 calc(var(--active) * 190%);
}
.tree__hole {
  scale: calc(0.65 + (var(--active) * 0.75));
}

console.log("Event Fired")
import { Pane } from 'https://cdn.skypack.dev/tweakpane'

const config = {
  theme: 'system',
  speed: 0.5,
  size: 96,
}

const ctrl = new Pane({
  title: 'Config',
  expanded: true,
})

ctrl.addBinding(config, 'theme', {
  label: 'Theme',
  options: {
    System: 'system',
    Light: 'light',
    Dark: 'dark',
  },
})

ctrl.addBinding(config, 'size', {
  min: 48,
  max: 300,
  step: 1,
  label: 'Size (px)',
})

ctrl.addBinding(config, 'speed', {
  min: 0,
  max: 5,
  step: 0.01,
  label: 'Speed (s)',
})

const update = () => {
  document.documentElement.dataset.theme = config.theme
  document.documentElement.style.setProperty('--speed', config.speed)
  document.documentElement.style.setProperty('--size', config.size)
}

const sync = (event) => {
  if (
    !document.startViewTransition ||
    !event ||
    (event && event.target.controller.view.labelElement.innerText !== 'Theme')
  )
    return update()
  document.startViewTransition(update)
}

sync()
ctrl.on('change', sync)

Frontend Forever App